<template>
  <div class="app-container">
    <el-card>
      <title-line title="基本信息" />
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :lg="12" :xl="10">
            <el-form-item label="匹配星级" prop="matchStar">
              <el-checkbox-group v-model="formData.matchStar">
                <el-checkbox
                  v-for="(item, index) in ORDER_TAGS_LEVEL"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="标签名称" prop="name">
              <el-input
                v-model.trim="formData.name"
                placeholder="请输入标签名称（最多8个字）"
                clearable
              />
            </el-form-item>
            <el-form-item label="显示顺序" prop="sort">
              <el-input
                v-model.trim="formData.sort"
                placeholder="请输入排序值（1-9999）"
                clearable
              />
              <p class="ft-12" style="color: #999">分类排序数字越大越靠前</p>
            </el-form-item>
            <el-form-item label="是否显示" prop="isShow" required>
              <el-radio-group v-model="formData.isShow">
                <el-radio
                  v-for="(item, index) in SHOW_STATUS"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
import rules from './formRules'
import { SHOW_STATUS } from '@/enum'
import { ORDER_TAGS_LEVEL } from '@/enum/order'
export default {
  name: 'OrderTagsForm',
  data() {
    return {
      formData: {
        matchStar: [],
        sort: 99,
        isShow: false,
        name: ''
      }
    }
  },
  computed: {
    // 是否显示
    SHOW_STATUS() {
      return SHOW_STATUS
    },
    // 评价星级
    ORDER_TAGS_LEVEL() {
      return ORDER_TAGS_LEVEL
    },
    rules() {
      return rules
    },
    id() {
      return this.$route.query?.id
    }
  },
  created() {
    this.getAppraiseTagDetail()
  },
  methods: {
    // 获取标签详情
    async getAppraiseTagDetail() {
      if (!this.id) return
      const { data } = await this.$http.order.tagApi.getAppraiseTagDetail(this.id)
      for (const key in this.formData) {
        this.formData[key] = data[key]
      }
      this.formData.matchStar = data.matchStar.split(',').map(item => parseInt(item))
    },
    // 新增标签
    addAppraiseTag: _.debounce(async function () {
      const params = {
        ...this.formData,
        matchStar: this.formData.matchStar.join(',')
      }
      const { status, msg } = await this.$http.order.tagApi.addAppraiseTag(params)
      if (status === 200) {
        this.$message.success('新增成功！')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    }, 500),
    // 编辑标签
    async editAppraiseTag() {
      const { status, msg } = await this.$http.order.tagApi.editAppraiseTag({
        id: this.id,
        ...this.formData,
        matchStar: this.formData.matchStar.join(',')
      })
      if (status === 200) {
        this.$message.success('编辑成功！')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    },
    // 提交
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        if (this.id) {
          this.editAppraiseTag()
        } else {
          this.addAppraiseTag()
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
